<template>
    <el-button type="primary" >删除</el-button>
    <el-button>保存</el-button>
    <el-tabs type="border-card" class="lycard" v-model="activeName" @tab-change="handleTabChage">
        <el-tab-pane label="审查" name="tab1">
            <el-table :data="data" height="550" ref="tableref" style="width: 100%" default-expand-all row-key="id" :tree-props="{ children: 'data'}"  @row-click="handleEdit" :row-class-name="handleRow">
                <el-table-column prop="name" label="名称" width="100"></el-table-column>
                <el-table-column prop="sn" label="sn码"></el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="单改" name="tab3">
            <el-table :data="data" height="550" ref="tableref" style="width: 100%" default-expand-all row-key="id" :tree-props="{ children: 'data'}"  @row-click="handleEdit" :row-class-name="handleRow">
                <el-table-column prop="name" label="名称" width="100"></el-table-column>
                <el-table-column prop="sn" label="sn码"></el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="批量改价" name="tab2" >
            <el-table :data="tableData" ref="tableref" style="width: 100%"  height="600">
                <el-table-column prop="sn" label="sn" width="100" show-overflow-tooltip></el-table-column>
                <el-table-column prop="sn" label="品牌" show-overflow-tooltip>
                    <template #default="scope">
                        <el-select v-model="value1"  placeholder="Select" size="large">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="t" label="极性" show-overflow-tooltip>
                    <template #default="scope">
                        <el-select v-model="value2"  placeholder="Select" size="large" @change="handleChange(row)">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="t" label="规格" show-overflow-tooltip>
                    <template #default="scope">
                        <el-button  placeholder="Select" size="large">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
    </el-tabs>
</template>
<script>
    export default {
        name:'Editor',
        props: {
            data: {
              type: Array,
              default: []
            }
        },
        data() {
            return {
                activeName:"tab1",
                value1:"",
                value2:"",
                control:"",
                options:[],
                tableData:[]
            }
        },
        methods:{
            handleTabChage(e){
            },
            handleEdit(row, column, event) {
                row["selected"]=!row["selected"]
            },
            handleRow({ row, rowIndex }) {
                let color = ''
                if(row["selected"]){
                    color = 'success-row'
                }else{
                    color = ''
                }
                return color
            },
            handleChange(row){
                console.log(this.value1+this.value2)
            },
            handleClick(val){
                if (val=="zoomin"){
                    this.canvas.zoom=this.canvas.zoom+0.1
                }
            }
        },
        created() {

        },
        watch:{
            data(val){
                let that=this
                this.data.forEach(function(items,index1,arr){
                    items["data"].forEach(function(item,index,arr){
                        let exists=that.tableData.find(function(value,index,arr){ return value.sn==item.sn})
                        if(!exists){
                            that.tableData.push({"name":item.name,"sn":item.sn,"index":[[index1,index]]})
                        }else{
                            that.tableData.find(function(value,index3,arr){ 
                                if(value.sn==item.sn) {
                                    value.index.push([index1,index])
                                }
                            })
                        }
                    })
                })
            },
        },
    }
</script>
